<template>
    <div class="article">
        <el-card class="box-card">
            <h3 class="title">mysql 连表操作后字符集不同导致索引失效</h3>
            <el-image fit="cover" style="width: 98%;height:350px;padding-left: 1%" :src="imgUrl"></el-image>
            <div>
                <el-alert
                        title="mysql 连表操作后字符集不同导致索引失效，字段1是utf8mb4字符集，字段2是utf8字符集。字符集转换遵循由小到大的原则，因为utf8mb4是utf8的超集，所以这里把utf8转换成utf8mb4，即把t1.code转换成utf8mb4字符集，转换了之后，由于t1.code上面的索引仍然是utf8字符集，所以这个索引就被执行计划忽略了，然后t1表只能选择全表扫描。更糟糕的是，如果t2筛选出来的记录不止1条，那么t1就会被全表扫描多次，性能之差可想而知"
                        type="info"
                >
                </el-alert>
            </div>
            <div>
                <el-button  style="float: right;margin-top: 10px;margin-bottom: 10px" type="primary">阅读全文</el-button>
            </div>
            <div class="float-right flag-right" id="yin-yang"></div>
            <div class="flag flag-left">置顶</div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Article",
        data: function () {
            return {
                imgUrl: require("../assets/8.jpg")
            }
        }
    }
</script>

<style scoped>
    .title {
        text-align: center;
    }

    .article {
        margin-bottom: 20px;
    }

    .box-card {
        position: relative;
        overflow: hidden;
    }

    .box-card .flag-left {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        left: -18px;
        top: 9px;
    }

    .box-card .flag {
        position: absolute;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: 74px;
        background-color: #ff5722;
        color: #fff;
    }

    .float-right{
        float: right;
    }
    .flag-right{
        top:9px;
        right: 9px;
        top: 9px;
        position: absolute;
    }

    #yin-yang {
        width: 48px;
        box-sizing: content-box;
        height: 24px;
        background: #eee;
        border-color: #909399;
        border-style: solid;
        border-width: 2px 2px 25px 2px;
        border-radius: 100%;
        /*position: relative;*/
    }
    #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 9px solid #909399;
        border-radius: 100%;
        width: 6px;
        height: 6px;
        box-sizing: content-box;
    }
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: #909399;
        border: 9px solid #eee;
        border-radius: 100%;
        width: 6px;
        height: 6px;
        box-sizing: content-box;
    }

</style>